import React, { useState } from 'react'
import "./Practice.less"


interface Iprops {
    title: string,
    data: ITestdata[],
    getVal: (p: string | number) => void
}
export default function PracticeItem(props: Iprops) {
    let { title, data, getVal } = props
    let [value, setValue] = useState(0)
    return (
        <div className='practiceitem'>
            <div className='title'>{title}</div>
            <ul>
                {
                    data.map((item, index) => {
                        return (<li key={index} onClick={() => {
                            getVal(item.value)
                            setValue(index)
                        }}
                            className={index === value ? 'action':""}
                        >{item.key}</li>)
                    })
                }
            </ul>
        </div>
    )
}
